<script setup lang="ts">
import { ref } from 'vue'
// 结构出安全区域的距离防止被遮挡
// 打印的结果是四个值{top: 20, right: 0, bottom: 0, left: 0}
const { safeAreaInsets } = uni.getSystemInfoSync()
const text = ref('')
const handleInput = () => {}
const inputStyle = {
  backgroundColor: 'rgba(255, 255, 255, 0.6)',
  border: '1px solid  transparent !important', // 添加边框颜色设置
  'border-radius': '32rpx !important',
}
</script>

<template>
  <!-- 动态的获取安全区域， 防止导航栏被遮挡 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text"> 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 icon-serach是全局定义的字体样式图标 -->
    <!--:styles可覆盖原本的样式  -->

    <uni-easyinput
      v-model="text"
      type="text"
      placeholder="搜索商品"
      placeholder-style="font-size: 28rpx;color: #fff;margin-left: 10rpx;"
      @confirm="handleInput"
      :styles="inputStyle"
      :inputBorder="false"
      :prefix="true"
      class="search"
    >
      <template #right>
        <text
          class="icon-search"
          mode="aspectFit"
          style="width: 32rpx; height: 32rpx; margin-right: 32rpx; color: #fff"
        />
      </template>
    </uni-easyinput>
  </view>
</template>

<style lang="scss" scoped>
/* 自定义导航条 */
// rpx 与 px（像素）的换算关系如下：
// 在 iPhone 6 上，1rpx 等于 0.5px。
// 在其他设备上，1rpx 的实际像素值会根据屏幕宽度进行换算。
.navbar {
  background-color: #d81e06;
  background-size: cover;
  position: relative;
  display: flex;
  // 它的子元素会按照垂直方向排列
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
}
:deep(.uni-easyinput) {
  border: 1px solid #fff !important;
  border-radius: 32rpx !important;
}
</style>
